<template>
	<view :class="[`${PREFIX}`]">
		<view :class="[`${PREFIX}-item`]" v-for="item in list" :key="item" @click="selectItem(item)">
			{{ item.name }}
			<image v-if="selectedItem.name === item.name" src="/static/common/s2.png" mode=""></image>
			<image v-else src="/static/common/s1.png" mode=""></image>
		</view>
		<view :class="[`${PREFIX}-btn`]">
			<CButton @click="report" :disabled="disabled" disabledBg="#B8A8FF" text="举报"></CButton>
		</view>
	</view>
</template>
<script>
	const PREFIX = 'home-report'
	import CButton from '../../components/CButton.vue'
	export default {
		data() {
			return {
				PREFIX,
				list: [{
						name: '违法犯罪（涉政、暴恐或黄赌毒）'
					},
					{
						name: '令人不适（低俗骚扰、暴力血腥）'
					},
					{
						name: '其他内容（辱骂、造谣或广告等）'
					},
					{
						name: '未成年人相关（未成年人有害信息等）'
					},
					{
						name: '盗用个人资料、内容或销项侵权'
					}
				],
				selectedItem: ''
			}
		},
		components: {
			CButton
		},
		computed: {
			disabled() {
				return !this.selectedItem
			}
		},
		methods: {
			selectItem(val) {
				this.selectedItem = val
			},
			report() {
				if (this.disabled) {
					return
				}
				console.log('xxxxxx');
				uni.redirectTo({
					url: '/pages/home/material'
				})
			}
		}
	}
</script>
<style lang="less">
	page {
		background: #fff;
	}

	.home-report {
		border-top: 1rpx solid #979797;

		&-item {
			height: 88rpx;
			padding: 0 40rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #979797;
			background: #ffffff;

			image {
				width: 38rpx;
				height: 38rpx;
			}
		}

		&-btn {
			width: 606rpx;
			position: fixed;
			bottom: 40rpx;
			left: 50%;
			transform: translateX(-50%);
		}
	}
</style>